<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    <div class="fj-sider ds-navList-wrap">
      <img
        src="static/images/fj-sider-bg.png"
        alt=""
        class="fj-sider-bg"
      >
      <nav-list></nav-list>
    </div>
    <div class="fj-body">
      <button @click="testOpenTabMenu">openTabMenu</button>
      <button @click="testSiderToggle">siderToggle</button>
      <button id="excute">执行execute</button>
      <button id="undo">执行undo</button>
      <!-- <canvas id="jubCanvas"></canvas> -->
      <!-- test -->
      <section class="diagonal-box">
        <section class="content">
          hahahehe<br>
          hahahehe<br>
          hahahehe
        </section>
      </section>
    </div>
    <div class="sass-header">
      <div class="sass-header_inner">
        <ul class="sass-header-nav">
          <li class="sass-header-nav_item"><a href="">112233</a></li>
          <li class="sass-header-nav_item"><a href="">112233</a></li>
          <li class="sass-header-nav_item"><a href="">112233</a></li>
        </ul>
      </div>
    </div>
    <!-- <a
      class="container"
      href="https://www.baidu.com"
    >
      <p class="style">
        <a
          class="container"
          href="https://www.qq.com"
        ></a>
      </p>
    </a> -->
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import { calc } from "@/mixin/cacl.js";
import dsCommon from "@/global/dsCommon";
import g1 from "@/global/testTreeData";
import navList from "@/components/nav";
// ---copy_jq
require("./study_jq/copy_jq");
//
import { su } from "@/global/study-underscore";
//
su();
//
import { lj_zq } from "@/study_jq/copy_jq";
//console.log(dsCommon);
//
function log() {
  console.log.apply(null, arguments);
}
//log(dsCommon.getTreeData(g1.treeData));
//log(dsCommon.quickSort([0,9,8,7,6,5,4,3,2,1]));
//log(dsCommon.getPageBtns({
//pageCount:110,
//current:18
//}));
//log(dsCommon.weekOfMonth(2019,7,1));
//
export default {
  name: "App",
  mixins: [calc],
  data() {
    return {
      localCount: 100
    };
  },
  mounted() {
    /*console.log(_);
      console.log(Backbone);*/
    /*_.templateSettings = {
          interpolate:/\{\{(.+?)\}\}/g
        };*/
    /*
      overflow:-moz-scrollbars-none;
      
      -ms-overflow-style:none;

      scrollIntoView

      scrollIntoViewIfNeed
    */
    
  },
  methods: {
    testOpenTabMenu() {
      var arr = [
        "/fjAttend-history3",
        "/fjAttend-history2",
        "/fjAttend-appeal",
        "/personal-assessment-rules",
        "/fjWorkManage-workLog",
        "/special-exam",
        "/personnel-rule-setting",
        "/index",
        "/data-center"
      ];
      dsNavList0505.openNavMenu(_.sample(arr));
      //dsNavList0505.refreshMenu();
    },
    testSiderToggle() {
      //
      dsNavList0505.clearItemsEvents();
      if (
        dsNavList0505.navListWrap.hasClass(dsNavList0505.settings.toggleClass)
      ) {
        dsNavList0505.deleteWrapEleStyle();
        dsNavList0505.navListWrap.removeClass(
          dsNavList0505.settings.toggleClass
        );
      } else {
        dsNavList0505.setWrapEleZindex();
        dsNavList0505.navListWrap
          .addClass(dsNavList0505.settings.toggleClass)
          .removeClass(dsNavList0505.settings.scrollClass);
      }
      //
      setTimeout(() => {
        dsNavList0505.setItemsEvents();
      }, 0);
      //
    }
  },
  components: {
    navList
  }
};
</script>

<style lang="scss">
@import "./common/font.css";
/* test */
:root {
  --magic-number: 0.09719;
  --content-width: 50em;
  --skew-padding: calc(var(--content-width) * var(--magic-number));
}
.diagonal-box {
  position: relative;
  padding: var(--skew-padding) 0;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #6303b1, #ff0099);
    transform: skewY(-11deg);
  }
  .content {
    position: relative;
    max-width: 50em;
    margin: 0 auto;
    text-align: center;
  }
}
/**/
body {
  background-color: #f1f9ff;
}
body:before {
  content: "";

  position: fixed;

  top: -10px;

  left: 0;

  width: 100%;

  height: 10px;

  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);

  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);

  z-index: 100;
}

a[href]:empty:after {
  content: attr(href);
}
*,
*:before,
*:after {
  box-sizing: border-box;
  transition: all 0.2s ease-in;
}
* {
  margin: 0;
  padding: 0;
}
ul,
li,
ol {
  list-style: none;
}
#app {
  font-family: PingFangSC, "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
}
/*0527*/
.fj-sider {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  width: 200px;
  z-index: 3;
  padding: 58px 10px 0px;
  .fj-sider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .ds-navList-item {
    position: relative;
    height: 36px;
    line-height: 36px;
    margin-bottom: 14px;
    padding-left: 52px;
    font-size: 16px;
    color: #e6e6e6;
    & > .item-tag {
      position: relative;
      &:before {
        display: none;
        content: "";
        position: absolute;
        top: 50%;
        left: -8px;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        background-color: #3aa0ff;
        border-radius: 50%;
      }
    }
    & > .icon,
    & > .arrow {
      position: absolute;
      top: 50%;
    }
    & > .icon {
      margin-top: -12px;
      left: 18px;
      width: 24px;
      height: 24px;
    }
    & > .arrow {
      margin-top: -5px;
      right: 13px;
      width: 6px;
      height: 10px;
    }
  }
  /*一级菜单*/
  .ds-navList-item[data-level="1"] {
    border-radius: 18px;
    &:hover,
    &.is-active {
      background-color: rgba(255, 255, 255, 0.2);
    }
    &.is-noHC {
      color: #1890ff;
      background-color: rgba(255, 255, 255, 1);
      & > .arrow {
        margin-top: -8px;
        right: 9px;
        width: 16px;
        height: 16px;
      }
    }
  }
  /*子菜单*/
  .ds-navList-item[data-level="x"] {
    padding-left: 0px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 18px;
    &.is-active {
      background-color: #fff;
      color: #3aa0ff;
      & > .item-tag {
        &:before {
          display: block;
        }
      }
    }
    & + .ds-navList {
      padding: 14px 10px 0px;
      background-color: rgba(0, 0, 0, 0.7);
    }
  }
}
/*  */
.fj-sider.sider-toggle {
  width: 40px;
  padding: 58px 2px 0px;
  background-color: rgba(0, 0, 0, 0.7);
  .fj-sider-bg {
    display: none;
  }
  .ds-navList-item[data-level="1"] {
    padding-left: 0px;
    &.is-active {
      border-radius: 50%;
    }
    & > .icon {
      left: 50%;
      margin-left: -12px;
    }
    & > .item-tag {
      display: none;
    }
    & > .arrow {
      display: none;
    }
    & + .ds-navList {
      position: absolute;
      top: 50%;
      left: 58px;
      transform: translateY(-50%);
      padding: 14px 10px 0px;
      width: 200px;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 8px;
    }
  }
}
/*  */
.fj-body {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 200px;
  right: 0;
  z-index: 2;
}
/*  */
.fj-sider.sider-toggle + .fj-body {
  left: 40px;
}
/*  */
/* #jubCanvas {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
} */
</style>
